图片技术全景梳理

图片（Image）是信息传递最古老也最高效的媒介之一。从洞穴壁画到数码相机，从 8-bit 调色板到 AI 生成 4K HDR，图片技术横跨采集、编码、存储、处理、传输、渲染、显示七大环节，涉及光学、电子、计算机科学、数学、认知科学等多个学科。本文从技术架构视角，全面梳理图片技术的知识体系。

1. 概述

图片技术的核心问题是：如何高效地表示、存储、处理和复现二维视觉信息。围绕这个核心，衍生出以下子领域：

2. 图片技术全景图

图 2.1：图片技术全景 — 从采集到显示的全链路架构

3. 图片格式体系

图片格式分为两大阵营：位图（Raster）和矢量图（Vector）。位图用像素矩阵描述图像，矢量图用数学模型（贝塞尔曲线、多边形等）描述图像。

3.1 位图格式

图 3.1：主要位图格式的演进关系

JPEG (Joint Photographic Experts Group) — 1992

• 压缩方式：有损，基于 DCT（离散余弦变换）+ 量化 + 霍夫曼编码
• 色深：8-bit/通道，支持灰度和 YCbCr
• 适用场景：照片、自然图像，不适合文字/线条图（会产生 ringing 伪影）
• 变体：Progressive JPEG（渐进式）、JPEG 2000（小波变换）、JPEG XR、JPEG XL
• 生态：全球最广泛支持的图像格式，libjpeg-turbo 是主流编解码库

PNG (Portable Network Graphics) — 1996

• 压缩方式：无损，DEFLATE（LZ77 + 霍夫曼）
• 色深：1/2/4/8/16-bit，支持灰度、RGB、RGBA
• 特性：Alpha 透明通道、Gamma 校正、隔行扫描（Adam7）
• 适用场景：Logo、UI 元素、截图、需要透明度的场景
• 局限：文件体积大，不支持动画（APNG 是扩展）

GIF (Graphics Interchange Format) — 1987

• 压缩方式：无损，LZW 压缩
• 色深：8-bit 调色板（最多 256 色）
• 特性：动画支持、二进制透明（不支持半透明）
• 适用场景：简单动画、表情包、低色彩图形
• 专利历史：LZW 专利曾引发 Unisys 专利纠纷，催生了 PNG 格式

WebP — 2010 (Google)

• 压缩方式：有损（VP8 关键帧压缩）+ 无损（预测编码 + 熵编码）
• 色深：8-bit，支持 Alpha 透明和动画
• 优势：同等质量下比 JPEG 小 25–34%、比 PNG 小 26%
• 适用场景：Web 图片，已被所有主流浏览器支持

AVIF (AV1 Image File Format) — 2019

• 压缩方式：有损/无损，基于 AV1 视频编码的帧内编码
• 色深：8/10/12-bit，支持 HDR（PQ/HLG）、广色域
• 特性：Alpha 透明、动画、多层图像
• 优势：比 WebP 再小 20–30%，支持 HDR
• 局限：编码速度慢（1–3x 于 WebP），解码硬件支持尚在普及中

HEIF/HEIC (High Efficiency Image File Format) — 2015

• 压缩方式：有损/无损，基于 HEVC (H.265) 帧内编码
• 色深：8/10/12/16-bit，支持 HDR、广色域
• 特性：支持连拍、深度图、Alpha 透明、图像序列
• 生态：Apple 生态默认格式（iOS 11+），专利授权费用是主要争议

BMP (Bitmap) — 1987

• 压缩方式：通常无压缩，可选 RLE
• 特点：简单原始，像素直接映射，文件巨大
• 用途：Windows 系统内部、图像处理中间格式、嵌入式设备

TIFF (Tagged Image File Format) — 1986

• 压缩方式：灵活，支持 LZW、ZIP、JPEG、无压缩
• 色深：最大 64-bit/通道，支持多种色彩空间
• 特性：多页文档、图层、元数据丰富
• 用途：专业摄影、印刷出版、文档扫描、遥感、医疗影像

RAW — 各厂商私有

• 本质：传感器原始数据，未经 ISP 处理（未去马赛克、未白平衡）
• 格式：CR2/CR3 (Canon)、NEF (Nikon)、ARW (Sony)、DNG (Adobe 开放标准)
• 特点：12–16-bit 线性数据，动态范围完整，后期空间极大
• 工具：Adobe Camera Raw、Capture One、RawTherapee（开源）、libraw

3.2 矢量格式

SVG (Scalable Vector Graphics) — 2001

• 本质：XML 文档描述图形，DOM 可操作
• 元素：<path>、<circle>、<rect>、<text>、<g> 等
• 特性：CSS 可美化、JS 可交互/动画、无限缩放不失真
• 用途：Web 图标、数据可视化、响应式图形、UI 组件

EPS (Encapsulated PostScript)

• 本质：PostScript 程序描述图形
• 用途：传统印刷出版，正逐渐被 PDF 取代

PDF (Portable Document Format)

• 内容：可同时包含矢量和位图
• 特性：跨平台一致性、嵌入字体、安全加密
• 用途：文档交换、印刷最终稿

3.3 格式对比总表

3.4 新兴/下一代格式

4. 图像编解码

图 4.1：典型有损图像编解码流水线

4.1 编解码流水线

编码流程

1. 色彩空间转换：RGB → YCbCr（分离亮度和色度，利用人眼对色度不敏感的特性）
2. 色度子采样：4:4:4 → 4:2:0（水平+垂直各减半色度分辨率），大幅减少数据量
3. 分块（Tiling）：将图像切分为固定大小块（JPEG: 8×8, AVIF: 64×64~128×128）
4. 变换（Transform）：空域→频域变换（DCT/DST/ADST），将能量集中到低频分量
5. 量化（Quantization）：除以量化矩阵并取整，高频分量趋向于零（主要信息损失来源）
6. 熵编码（Entropy Coding）：霍夫曼编码 / 算术编码 / ANS，进一步压缩量化后的系数

解码流程

1. 熵解码：恢复量化系数
2. 反量化：乘以量化矩阵（信息不可逆恢复）
3. 逆变换：频域→空域（IDCT/IDST）
4. 去块效应滤波（现代格式）：消除块边界不连续伪影
5. 色度上采样 + 色彩空间转换：YCbCr → RGB

4.2 硬件加速编解码

4.3 主流开源实现

5. 图像压缩

5.1 无损压缩原理

无损压缩保证解码后的像素值与原始输入完全一致（bit-exact）。核心思路：利用图像中的统计冗余。

5.2 有损压缩原理

有损压缩的核心哲学：丢掉人眼不敏感的信息。

DCT（离散余弦变换）— JPEG 的基础

• 将 8×8 像素块从空域变换到频域，得到 1 个 DC（直流）系数 + 63 个 AC（交流）系数
• DC 系数代表块的平均亮度，AC 系数从低频到高频排列
• 量化矩阵决定各频率分量的压缩程度——高频系数被更激进地量化（趋向于零）
• 量化后的系数经之字形扫描（zigzag）排列，尾部连续零用 EOB (End of Block) 标记
• 缺点：低码率时出现块效应（blocking artifact）和振铃效应（ringing artifact）

小波变换（Wavelet）— JPEG 2000 的基础

• 对整张图像做多尺度分解，而非分块处理，天然避免块效应
• 支持渐进式传输：先传低分辨率版本，逐步细化
• 计算复杂度高于 DCT，专利问题阻碍了 JPEG 2000 的 Web 普及

现代混合编码（AVIF/WebP/HEIF）

• 帧内预测：利用相邻已编码块的像素预测当前块（方向预测、DC、Plane 等模式）
• 变换：DCT/DST/ADST，块大小可变（4×4 到 128×128）
• 环路滤波：去块滤波器（Deblocking Filter）+ 样本自适应偏移（SAO）+ 自适应环路滤波（ALF），消除压缩伪影
• 更大的编码单元：Superblock (128×128)，更灵活的分割（四分、T 型等）

5.3 深度学习压缩

6. 色彩科学

图 6.1：主要色彩空间在 CIE 1931 xy 色度图上的覆盖范围

6.1 色彩空间

6.2 色彩管理

• ICC Profile：描述设备的色彩特性（显示器、打印机、扫描仪），通过 PCS (Profile Connection Space) 做设备间转换
• 渲染意图：Perceptual（保持视觉关系）、Relative Colorimetric（白点映射）、Absolute Colorimetric（精确匹配）、Saturation（保持饱和度）
• 关键库：Little CMS (lcms2) — C 语言开源色彩管理引擎，几乎被所有图像软件使用
• Web 色彩管理：CSS color() 函数、@media (color-gamut) 查询、Canvas 的色彩空间参数

6.3 HDR（高动态范围）

• SDR：峰值亮度 ~100 nits，8-bit 量化（256 级），Gamma EOTF
• HDR10：峰值亮度 1000+ nits，10-bit 量化（1024 级），ST.2084 (PQ) EOTF，静态元数据（MaxFALL/MaxCLL）
• HDR10+：在 HDR10 基础上加入动态元数据（逐场景调整亮度映射）
• Dolby Vision：12-bit，逐帧动态元数据，需授权费，高端 TV/流媒体支持
• HLG (Hybrid Log-Gamma)：BBC/NHK 开发，兼容 SDR 显示器，无需元数据，用于广播电视
• HDR 图片格式：AVIF (10/12-bit)、HEIF (10-bit)、JPEG XL、OpenEXR (VFX/电影)

7. 图像采集

图 7.1：典型相机 ISP 处理管线

7.1 图像传感器

主要传感器厂商

• Sony Semiconductor：全球最大 CIS 厂商，iPhone/Samsung/主流安卓旗舰供应商，IMX 系列
• Samsung ISOCELL：垂直第二，自供 Galaxy 系列 + 外供，HP/GN 系列（200MP）
• OmniVision (韦尔半导体)：中国最大 CIS 厂商，汽车/安防/手机副摄
• STMicroelectronics：ToF 传感器（Apple Face ID 供应商）
• ON Semiconductor / Gpixel / Smartsens：工业/汽车/科学成像

7.2 ISP 管线

ISP (Image Signal Processor) 将传感器输出的 Bayer RAW 数据转化为可视图像。典型管线：

1. 黑电平校正 (BLC)：减去传感器暗电流产生的偏移
2. 坏点校正 (DPC)：检测并插补传感器坏点
3. 去马赛克 (Demosaicing)：从 Bayer 模式（每个像素只有 R/G/B 之一）重建全彩图像
4. 白平衡 (AWB)：估计光源色温并校正（灰世界/完美反射/学习法）
5. 色彩校正矩阵 (CCM)：传感器 RGB → 标准色彩空间 (sRGB/P3) 的 3×3 矩阵
6. Gamma 校正：线性 → Gamma 编码
7. 降噪 (Denoise)：空域降噪（双边/非局部均值）+ 时域降噪（多帧对齐融合）
8. 边缘增强/锐化：增强细节和纹理
9. 色调映射 (Tone Mapping)：高动态范围 → 显示动态范围的压缩
10. 缩放/裁剪：输出目标分辨率
11. 编码输出：编码为 JPEG/HEIF/RAW 等格式

7.3 计算摄影

8. 图像渲染

图 8.1：现代 GPU 图形渲染管线

8.1 GPU 架构

8.2 图形 API

8.3 渲染管线

1. 输入装配 (Input Assembly)：从顶点/索引缓冲区读取几何数据（点、线、三角形）
2. 顶点着色器 (Vertex Shader)：逐顶点处理——坐标变换、光照计算（Gouraud）、骨骼动画
3. 曲面细分 (Tessellation)（可选）：动态细分曲面以增加几何细节
4. 几何着色器 (Geometry Shader)（可选）：生成/销毁图元
5. 光栅化 (Rasterization)：将几何图元转换为像素片段 (fragment)，执行裁剪、透视校正、面剔除
6. 片段着色器 (Fragment Shader / Pixel Shader)：逐片段计算颜色——纹理采样、Phong 光照、PBR
7. 输出合并 (Output Merger)：深度/模板测试、混合 (Blending)、写入帧缓冲

8.4 光线追踪

• 基本原理：从相机向每个像素发射光线，追踪光线与场景的交点，递归计算反射/折射/阴影
• 加速结构：BVH (Bounding Volume Hierarchy) 树，将几何体组织为层级包围盒，加速光线-三角形求交
• 降噪 (Denoising)：光线追踪结果是蒙特卡洛采样的噪声图，需降噪器（NVIDIA OptiX / Intel OIDN / AMD GPUOpen）处理
• 混合渲染：光栅化 + 光线追踪，只在关键效果（反射、阴影、GI）上使用光追
• 路径追踪 (Path Tracing)：完全基于光线追踪的渲染，每像素数千条光线，电影级质量
• DLSS/FSR/XeSS：低分辨率渲染 + AI 超分/帧生成，补偿光追带来的性能开销

9. 图像处理

9.1 传统图像处理

9.2 深度学习图像处理

10. 显示技术

10.1 面板技术

10.2 显示参数标准

10.3 新兴显示技术

• LTPO (低温多晶氧化物)：动态刷新率 (1–120 Hz)，Apple Watch/iPhone Pro 使用，大幅降低常亮功耗
• Tandem OLED：双层 OLED 堆叠，提升亮度和寿命，iPad Pro M4 首次在消费平板中使用
• QLED / Neo QLED：三星品牌名，本质是量子点膜 + Mini-LED 背光的 VA LCD
• μLED / MicroLED：被视为显示技术的终极形态，三星/LG/Apple 均在研发
• 全息显示 (Holographic Display)：记录和再现光场，Looking Glass / Light Field Lab，处于早期阶段

11. 图像生成

图 11.1：图像生成技术路线图

11.1 GAN（生成对抗网络）— 2014

• 原理：生成器 (Generator) 和判别器 (Discriminator) 对抗训练——生成器制造假图，判别器区分真假，两者博弈
• 里程碑：
  • DCGAN (2015)：CNN 架构的 GAN，稳定训练首发
  • StyleGAN/StyleGAN2/StyleGAN3 (2018–2021)：NVIDIA，可控制面部/属性，高分辨率（1024²）
  • Pix2Pix (2017)：配对图像翻译（草图→实物）
  • CycleGAN (2017)：无配对图像翻译（马↔斑马、风格迁移）
  • BigGAN (2018)：大规模条件 GAN，ImageNet 512² 生成
• 局限：训练不稳定（模式崩塌）、多样性不如 Diffusion

11.2 Diffusion Model（扩散模型）— 2020

• 原理：
  1. 前向扩散：逐步向图像加高斯噪声，直至完全噪声
  2. 反向去噪：用 U-Net / DiT (Diffusion Transformer) 学习逐步去噪，从噪声中恢复图像
  3. 条件引导：文本 (CLIP text encoder)、图像 (ControlNet/IP-Adapter)、结构（深度/边缘/姿态）
• 里程碑：
  • DDPM (2020)：Ho et al.，奠定扩散模型基础
  • Stable Diffusion (2022)：Latent Diffusion，在 VAE 潜在空间去噪，大幅降低计算量
  • DALL-E 2/3 (2022/2023)：OpenAI，文本→图像生成的标杆
  • Midjourney v5/v6 (2023/2024)：目前画质/美感最强的消费级工具（闭源）
  • SDXL / SD3 / Flux (2023–2024)：更高分辨率、更好文本理解、DiT 架构
• 关键技术：
  • Classifier-Free Guidance (CFG)：平衡生成质量和文本一致性
  • LoRA / DreamBooth：低秩适配/微调，用少量图片定制概念/角色/风格
  • ControlNet：结构化控制——用深度图、边缘图、姿态骨架精准控制生成
  • IP-Adapter：用参考图作为风格/内容提示
  • LCM (Latent Consistency Model)：1–4 步极速推理

11.3 NeRF / 3D Gaussian Splatting

• 应用：虚拟拍摄 (VFX)、数字孪生、VR/AR 内容生成、Google Immersive View、Luma AI / Polycam
• 趋势：4D Gaussian Splatting（动态场景）、3DGS + Diffusion（文本→3D）、手机端实时 3DGS（InstantSplat）

12. 图像存储与传输

12.1 CDN & 边缘分发

• CDN (Content Delivery Network)：将图片缓存到全球边缘节点，用户从最近节点加载
• Image CDN（专为图片优化的 CDN）：imgix、Cloudinary、Cloudflare Images、七牛/又拍云
• 核心能力：URL 参数实时变换（缩放/裁剪/格式转换/压缩质量）、自动选择最优格式（Accept 头检测）、缓存策略

12.2 自适应图像

• HTML 方法：
  • <img srcset> + <img sizes>：浏览器根据设备像素比和视口宽度选择合适分辨率
  • <picture> + <source>：根据媒体查询或格式支持选择不同图片源（如 WebP/AVIF 兜底 JPEG）
• CSS 方法：image-set() 函数、@media (resolution) 媒体查询
• JavaScript 方法：Network Information API、ResizeObserver + 动态 URL 生成

12.3 渐进式加载

• Progressive JPEG：分多次扫描，先展示低分辨率概览，逐步细化（类似视频流的渐进解码）
• LQIP (Low Quality Image Placeholder)：先加载极小的模糊缩略图（或纯色/渐变 SVG），再加载原图
• BlurHash：将图片编码为 20–30 字符的字符串，解码端渲染模糊占位图（Wolt/Unsplash 发明）
• Lazy Loading：loading="lazy" 属性、IntersectionObserver API，只加载视口内的图片

13. 生态与工具链

14. 总结

图片技术是一个非常活跃、交叉学科众多、产业规模巨大的领域。以上梳理覆盖了从物理光子到数字像素、从芯片到云端、从工具到标准的完整技术栈。每个子领域都值得单独展开深入研究。